<template>
  <div>
    <table-search :searchOptions="searchOptions" :searchSource="searchSource"
     @searchHandle="searchHandle" @resetHandle="resetHandle">
      <template slot="table-search_behind">
        <el-button v-if="isAuth('sys:user:save')" type="primary" icon="el-icon-edit" :size="searchOptions.size" @click="addHandle()">新增</el-button>
        <el-button v-if="isAuth('sys:user:delete')" type="danger" icon="el-icon-delete" :size="searchOptions.size" @click="batchDeleteHandle()">批量删除</el-button>
      </template>
    </table-search>
    <table-content ref="table" :tableOptions="tableOptions" :tableSource="tableSource" @selectionChangeHandle="selectionChangeHandle"
     @sortChangeHandle="sortChangeHandle" @pageHandle="pageHandle">
    </table-content>
    <user-info v-if="userInfoDialogVisible" ref="userInfoDialog" :size="this.size" @flush="flush"></user-info>
  </div>
</template>

<script>
import TableSearch from '@/components/table/table-search'
import TableContent from '@/components/table/table-content'
import UserInfo from '@/views/modules/sys/user-info'
import { getUserListApi, deleteUserApi, batchDeleteUserApi, restUserPasswordApi } from '@/api/user'

export default {
  components: { TableSearch, TableContent, UserInfo },
  props: {
    size: {
      type: String,
      default: 'mini'
    }
  },
  data() {
    return {
      searchOptions: {
        size: this.size,
        show: true,
        init: true
      },
      tableOptions: {
        size: this.size,
        highlightCurrentRow: true, // 是否要高亮当前行
        fit: true, // 列的宽度是否自撑开
        mutiSelect: true, // 是否显示选择框
        pagination: true // 是否分页
      },
      searchSource: {
        inModel: {
          userName: '',
          minCreateTime: '',
          maxCreateTime: '',
          status: ''
        },
        operations: [
          {
            name: '用户名',
            key: 'userName',
            type: 'text',
            width: '9rem',
            length: 10
          },
          {
            name: '创建时间',
            key: 'createTime',
            type: 'daterange',
            width: '18rem'
          },
          {
            name: '状态',
            key: 'status',
            type: 'select',
            width: '7rem',
            list: [
              { key: '删除', value: '-1' },
              { key: '未启用', value: '0' },
              { key: '启用', value: '1' },
              { key: '锁定', value: '2' },
              { key: '禁用', value: '3' }
            ]
          },
          {
            type: 'place',
            width: '13rem'
          }
        ]
      },
      tableSource: {
        headers: [
          {
            prop: 'id',
            label: '用户id',
            width: '150px',
            route: {
              type: 0,
              field: 'id',
              method: (data) => {
                this.viewHandle(data)
              }
            }
          },
          {
            prop: 'createTime',
            label: '创建时间',
            width: '150px',
            sortable: 'custom',
            formatData: (row, column, columnValue) => {
              return this.$time.formatDate(columnValue, 'yyyy-MM-dd HH:mm:ss')
            }
          },
          {
            prop: 'updateTime',
            label: '修改时间',
            width: '150px',
            sortable: 'custom',
            formatData: (row, column, columnValue) => {
              return this.$time.formatDate(columnValue, 'yyyy-MM-dd HH:mm:ss')
            }
          },
          { prop: 'userName', label: '用户名' },
          {
            prop: 'statusDesc',
            label: '状态',
            minWidth: '50px',
            tag: {
              prop: 'status',
              filter: (val) => {
                let data = {
                  '-1': 'info',
                  '0': 'primary',
                  '1': 'success',
                  '2': 'warning',
                  '3': 'danger'
                }
                return data[val]
              }
            }
          },
          { prop: 'expiredDesc', label: '是否过期', width: '100px' },
          {
            operation: true,
            operations: [
              {
                label: '重置密码',
                type: 'primary',
                show: true,
                plain: true,
                permission: 'sys:user:reset',
                method: (index, row) => {
                  this.restPasswordHandle(index, row)
                }
              },
              {
                label: '编辑',
                type: 'warning',
                icon: 'el-icon-edit',
                show: true,
                plain: true,
                permission: 'sys:user:update',
                method: (index, row) => {
                  this.editHandle(index, row)
                }
              },
              {
                label: '删除',
                type: 'danger',
                icon: 'el-icon-delete',
                show: true,
                permission: 'sys:user:delete',
                method: (index, row) => {
                  this.delHandle(index, row)
                }
              }
            ]
          }
        ],
        data: []
      },
      query: {
        sortField: '',
        sortRule: 1,
        page: 1,
        pageSize: 15,
        userName: '',
        minCreateTime: '',
        maxCreateTime: '',
        status: ''
      },
      selections: [],
      userInfoDialogVisible: false
    }
  },
  created() {
    this.list(this.query)
  },
  methods: {
    list(data) {
      getUserListApi(data).then(res => {
        this.tableSource.data = res.data
        this.tableSource.data.content.forEach(item => {
          if (item.status === -1) {
            if (item.disabledButtonIndexs === undefined) {
              item.disabledButtonIndexs = []
            }
            item.disabledButtonIndexs.push(2)
          }
          // root账户不能操作
          if (item.userName === 'root') {
            if (item.disabledButtonIndexs === undefined) {
              item.disabledButtonIndexs = []
            }
            item.disabledButtonIndexs.push(0)
            item.disabledButtonIndexs.push(1)
            item.disabledButtonIndexs.push(2)
            item.selection = false
          }
        })
      })
    },
    flush() {
      this.list(this.query)
    },
    searchHandle(obj) {
      this.query.page = obj.page
      Object.assign(this.query, obj.backData)
      this.list(this.query)
    },
    resetHandle() {
      Object.assign(this.$data.query, this.$options.data().query)
      this.$refs.table.init()
      this.list(this.query)
    },
    selectionChangeHandle(obj) {
      this.selections = obj.backData
    },
    sortChangeHandle(obj) {
      let column = obj.backData
      if (column.order) {
        this.query.sortField = column.prop
        // 倒序
        if (column.order === 'descending') {
          this.query.sortRule = 1
        } else {
          this.query.sortRule = 0
        }
      } else {
        // 不排序
        this.query.sortField = ''
        this.query.sortRule = 0
      }
      this.list(this.query)
    },
    pageHandle(obj) {
      this.query.page = obj.backData.page
      this.query.pageSize = obj.backData.pageSize
      this.list(this.query)
    },
    // 查看
    viewHandle (id) {
      this.userInfoDialogVisible = true
      this.$nextTick(() => {
        this.$refs.userInfoDialog.init(id, 1)
      })
    },
    // 重置密码
    restPasswordHandle (id, row) {
      restUserPasswordApi(row.id).then(res => {
        this.$message({
          message: '重置成功',
          type: 'success',
          duration: 1500
        })
        this.list(this.query)
      }).catch(() => {
        this.$message({
          message: '重置失败',
          type: 'error',
          duration: 1500
        })
      })
    },
    // 编辑
    editHandle (index, row) {
      this.userInfoDialogVisible = true
      this.$nextTick(() => {
        this.$refs.userInfoDialog.init(row.id, 2)
      })
    },
    // 删除
    delHandle (index, row) {
      deleteUserApi({ 'id': row.id }).then(res => {
        this.$message({
          message: '删除成功',
          type: 'success',
          duration: 1500
        })
        this.list(this.query)
      }).catch(() => {
        this.$message({
          message: '删除失败',
          type: 'error',
          duration: 1500
        })
      })
    },
    // 新增
    addHandle () {
      this.userInfoDialogVisible = true
      this.$nextTick(() => {
        this.$refs.userInfoDialog.init(new Date().getTime(), 0)
      })
    },
    // 批量删除
    batchDeleteHandle () {
      if (this.selections.length === 0) {
        this.$message({
          message: '请选择数据',
          type: 'warning',
          duration: 1500
        })
        return
      }
      let operationIds = this.selections.filter(item => item.status !== -1).map(item => { return item.id })
      if (operationIds.length > 0) {
        batchDeleteUserApi(operationIds).then(res => {
          this.$message({
            message: '批量删除成功',
            type: 'success',
            duration: 1500
          })
          this.list(this.query)
        }).catch(() => {
          this.$message({
            message: '批量删除失败',
            type: 'error',
            duration: 1500
          })
        })
      }
    }
  }
}
</script>

<style>
</style>
